<template>
  <div>
    <div>
      <el-form ref="filters" :model="filters" label-width="120px">
        <div class="filter-container">
          <el-form-item label="Date" class="filter-item">
            <el-date-picker type="date" placeholder="选择开始日期" v-model="selectfilters.date1"></el-date-picker>---
            <el-date-picker type="date" placeholder="选择结束日期" v-model="selectfilters.date2"></el-date-picker>
          </el-form-item>
          <el-form-item label="Task ID:" class="filter-item">
            <el-select
              v-model="selectfilters.equipmenttype"
              filterable
              @change="selectTrigger(selectfilters.equipmenttype)"
              placeholder="Select"
            >
              <el-option
                v-for="item in filters.equipmenttype"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Status:" class="filter-item">
            <el-select v-model="filters.filterplan" placeholder="Select">
              <el-option key="bbk" label="步步高" value="bbk"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Parameter Y:" class="filter-item">
            <el-select v-model="filters.tool" placeholder="Select">
              <el-option key="bbk" label="PPILD00" value="PPILD00"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Accuracy:" class="filter-item">
            <el-select v-model="filters.tool" placeholder="Select">
              <el-option key="bbk" label="PPILD00" value="PPILD00"></el-option>
            </el-select>
          </el-form-item>

          <div class="filter-buttonbox">
            <el-form-item>
              <el-button type="primary" >Search</el-button>
              <!-- <el-button type="primary" @click="onImport">Import</el-button> -->
              <el-button :loading="loading" type="primary" @click="handleUpload">Import</el-button>
              <el-button type="primary" @click="onExport">Export</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>

    <div>
      <!--列表-->
      <el-table
        :data="typesetuplist"
        highlight-current-row
        v-loading="listLoading"
        @selection-change="selsChange"
        style="width: 100%;"
      >
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="department" label="Task ID" width="140" sortable></el-table-column>
        <el-table-column prop="section" label="Status" width="140" sortable></el-table-column>
        <el-table-column prop="equipmenttype" label="Create Time" width="140" sortable></el-table-column>
        <el-table-column prop="filterplan" label="Parameter Y" width="190" sortable></el-table-column>
        <el-table-column prop="tool" label="Parameters Sum" width="190" sortable></el-table-column>
        <el-table-column prop="chamber" label="Running Time" width="190" sortable></el-table-column>>
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :page-size="10"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        equipmenttype: [
          {
            value: "DNS1"
          },
          {
            value: "DNS2"
          },
          {
            value: "DDC"
          },
          {
            value: "NNC"
          },
          {
            value: "DNS3"
          }
        ]
      },
      selectfilters: {
        equipmenttype: "",
        date1: "",
        date2: ""
      }
    };
  }
};
</script>
<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.filter-container {
  /* padding-top: 10px; */
  /* padding-bottom: 10px; */
}
.filter-item {
  display: inline-block;
  /* padding: 10px; */
  padding-left: 60px;
}

.filter-button {
  display: inline-block;
}
.filter-buttonbox {
  float: right;
  padding-right: 100px;
}

.excel-upload-input {
  display: none;
  z-index: -9999;
}
</style>
